<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">编码转换工具</span>
        </h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          提供各种编码转换工具，包括Base64、URL编码、哈希计算等
        </p>
      </div>

      <!-- Tool Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="tool in encodeTools" :key="tool.id" class="tool-card">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center flex-shrink-0">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tool.icon"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tool.name }}</h3>
              <p class="text-gray-600 text-sm mb-3">{{ tool.description }}</p>
              <NuxtLink :to="tool.path" class="primary-button inline-block">
                开始使用
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const encodeTools = [
  {
    id: 1,
    name: 'Base64编码',
    description: '文本与Base64编码相互转换',
    path: '/encode-tools/base64',
    icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'
  },
  {
    id: 2,
    name: 'URL编码',
    description: '文本与URL编码相互转换',
    path: '/encode-tools/url',
    icon: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'
  },
  {
    id: 3,
    name: 'MD5哈希',
    description: '计算文本的MD5哈希值',
    path: '/encode-tools/md5',
    icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'
  },
  {
    id: 4,
    name: 'SHA哈希',
    description: '计算文本的SHA哈希值',
    path: '/encode-tools/sha',
    icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'
  },
  {
    id: 5,
    name: 'HTML编码',
    description: '文本与HTML实体编码转换',
    path: '/encode-tools/html',
    icon: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'
  },
  {
    id: 6,
    name: 'JSON格式化',
    description: 'JSON数据的格式化与压缩',
    path: '/encode-tools/json',
    icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'
  }
  ,
  {
    id: 7,
    name: '时间戳转换',
    description: '时间戳（秒/毫秒）与可读时间互转，支持本地与 UTC、复制与当前时间设置',
    path: '/encode-tools/timestamp',
    icon: 'M12 8v4l3 3'
  }
  ,
  {
    id: 8,
    name: 'API 测试',
    description: '发送 GET/POST 请求，支持输入 URL、JSON body、查看响应与响应头',
    path: '/encode-tools/api',
    icon: 'M12 8c-1.657 0-3 1.343-3 3v6h6v-6c0-1.657-1.343-3-3-3z'
  }
]

// SEO
useHead({
  title: '编码转换工具 - 八八在线工具',
  meta: [
    { name: 'description', content: '在线编码转换工具，提供Base64、URL编码、MD5、SHA哈希、HTML编码、JSON格式化等多种实用功能' },
    { property: 'og:title', content: '编码转换工具 - 八八在线工具' },
    { property: 'og:description', content: '在线编码转换工具，提供Base64、URL编码、MD5、SHA哈希等多种实用功能' }
  ]
})
</script>